<template>
  <div class="authContainer" :style="'min-height: ' + docheight + 'px'">
    <div class="timeCont" v-if="showCont && !showTimeOut">
      <div class="bannerCont">
        <img class="bannerImg" :src="'static/img/' + schoolId + '.png'" />
      </div>
      <div class="formCont" v-if="!isSign">
        <div class="formTitle">冬令营报名申请单</div>
        <div class="formStep">
          <div>基本信息</div>
          <div class="ctrlBtn" @click="isOpenOne = !isOpenOne">
            {{ isOpenOne ? "收起" : "展开" }}
          </div>
        </div>
        <div class="stepItem" v-if="isOpenOne">
          <div class="formInput">
            <div class="inputName">报名姓名</div>
            <input
              v-model="signInfo.realname"
              type="text"
              maxlength="5"
              placeholder="请输入报名姓名"
            />
          </div>
          <div class="formInput">
            <div class="inputName">学生性别</div>
            <div class="inputOut">
              <div class="inputMask" @click="sexShow = true"></div>
              <input v-model="signInfo.sex" placeholder="请选择学生性别" />
            </div>
            <div @click="sexShow = true" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">年级班级</div>
            <input
              v-model="signInfo.class_name"
              type="text"
              maxlength="5"
              placeholder="请输入班级（例如:7年级3班）"
            />
          </div>
          <div class="formInput">
            <div class="inputName">报名人数</div>
            <div class="inputOut">
              <div class="inputMask" @click="joinNumShow = true"></div>
              <input
                v-model="signInfo.sign_up_num"
                placeholder="请选择报名人数"
              />
            </div>
            <div @click="joinNumShow = true" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">出发日期</div>
            <div class="inputOut">
              <div class="inputMask"></div>
              <input
                disabled
                v-model="signInfo.cf_time"
                placeholder="请选择出发日期"
              />
            </div>
            <div class="iconfont icon-xiala" v-if="false"></div>
          </div>
          <div class="formInput">
            <div class="inputName">家长电话</div>
            <input
              v-model="signInfo.mobile"
              type="text"
              maxlength="11"
              placeholder="请输入家长电话"
            />
          </div>
          <div class="formInput" v-if="false">
            <div class="inputName">护照号码</div>
            <input
              v-model="signInfo.hz_number"
              type="text"
              placeholder="请输入护照号码(非必填)"
            />
          </div>
        </div>
        <div class="formStep">
          <div>保险信息</div>
          <div class="ctrlBtn" @click="isOpenTwo = !isOpenTwo">
            {{ isOpenTwo ? "收起" : "展开" }}
          </div>
        </div>
        <div class="stepItem" v-if="isOpenTwo">
          <div class="formInput">
            <div class="inputName">身份证号</div>
            <input
              v-model="signInfo.id_card"
              type="text"
              maxlength="18"
              placeholder="请输入身份证号"
            />
          </div>
          <div class="formInput">
            <div class="inputName">出生日期</div>
            <div class="inputOut">
              <div class="inputMask" @click="showDate = true"></div>
              <input
                v-model="signInfo.date_birth"
                placeholder="请选择出生日期"
              />
            </div>
            <div @click="showDate = true" class="iconfont icon-xiala"></div>
          </div>
          <div class="formInput">
            <div class="inputName">所属民族</div>
            <input
              v-model="signInfo.mz"
              type="text"
              maxlength="20"
              placeholder="请输入所属民族"
            />
          </div>
          <div class="formInput">
            <div class="inputName">所属国籍</div>
            <input
              v-model="signInfo.gj"
              type="text"
              maxlength="20"
              placeholder="请输入所属国籍"
            />
          </div>
          <div class="formInput">
            <div class="inputName">身体状况</div>
            <van-radio-group v-model="checked">
              <div class="formFlexCont">
                <div class="formRadio">
                  <van-radio name="1">健康</van-radio>
                </div>
                <div>
                  <van-radio name="2">备注</van-radio>
                </div>
              </div>
            </van-radio-group>
          </div>
          <div class="formInput textareaCont" v-if="checked == 2">
            <van-field
              v-model="signInfo.stzk"
              rows="5"
              autosize
              type="textarea"
              placeholder="请输入状况备注"
            />
          </div>
        </div>
        <div class="linkCont">
          <!-- <div @click="checkFn" :class="isCheck?'linkActive linkRadio iconfont icon-gouxuan1':'linkRadio iconfont icon-gouxuan1'"></div> -->
          <div>
            请认真阅读并签名<span class="linkText" @click="linkShowFn"
              >《报名服务合同》</span
            >(点击查看合同)
          </div>
        </div>
        <div class="formTip">
          *报名费用：{{ schoolId == 1 ? "15800" : "5800" }}元/人
        </div>
        <div class="saveBtn" @click="saveFn">
          确认信息无误报名
        </div>
      </div>
      <div class="formCont noBg" v-if="isSign">
        <img class="signImg" src="static/img/sign.png" />
        <div class="formTitle" v-if="false">
          恭喜 "{{ signData.realname }}" 已报名！
        </div>
        <div class="formStep" v-if="false" style="margin-top: 2rem">
          <div>报名成功，请完善付款</div>
          <div class="ctrlBtn" @click="copyFn">[点击复制账号]</div>
        </div>
        <div class="stepItem" v-if="false">
          <!-- <div class="formInput">
            <div class="inputName">账号</div>
            <div class="inputVal">{{ bankNum }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">账户名</div>
            <div class="inputVal">上海琢兴教育科技有限公司</div>
          </div> -->
          <div class="formInput">
            <div class="inputName">报名费用</div>
            <div class="inputVal">
              {{ getAllMoney() }}元（共{{
                signData.sign_up_parents_num + signData.sign_up_student_num
              }}人）
            </div>
          </div>
          <div class="formInput">
            <div class="inputName">支付宝</div>
            <div class="inputVal">15900655900（姓王）</div>
          </div>
          <!-- <div class="formTip">*报名费用：学生14800元/人；陪同12800元/人</div> -->
          <!-- <div class="formTip">
            *转账备注：姓名+家长电话(例：小王 15900655900)
          </div> -->
          <!-- <div class="formTip">*其他问题：转账遇到问题请咨询负责人Jack。</div> -->
          <div class="formTip textCenter">
            *费用可转给班主任或研学王老师。
            <p>缴费后统一安排拉入出行群。</p>
          </div>
        </div>
        <div class="formStep">
          <div>报名信息</div>
          <!-- <div class="ctrlBtn" @click="isOpenThree = !isOpenThree">{{ isOpenThree?'收起':'展开' }}</div> -->
        </div>
        <div class="stepItem" v-if="isOpenThree || true">
          <div class="formInput">
            <div class="inputName">订单编号</div>
            <div class="inputVal">{{ signData.order_number }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">报名姓名</div>
            <div class="inputVal">{{ signData.realname }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">学生性别</div>
            <div class="inputVal">
              {{ signData.sex == 1 ? "男生" : "女生" }}
            </div>
          </div>
          <div class="formInput">
            <div class="inputName">学生年龄</div>
            <div class="inputVal">{{ signData.age }}岁</div>
          </div>
          <div class="formInput">
            <div class="inputName">年级班级</div>
            <div class="inputVal">{{ signData.class_name }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">报名人数</div>
            <div class="inputVal">
              {{ signData.sign_up_student_num }}学生{{
                signData.sign_up_parents_num
              }}陪同(共{{
                signData.sign_up_parents_num + signData.sign_up_student_num
              }}人)
            </div>
          </div>
          <div class="formInput">
            <div class="inputName">出发日期</div>
            <div class="inputVal">{{ signData.cf_time }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">家长电话</div>
            <div class="inputVal">{{ signData.mobile }}</div>
          </div>
          <div class="formInput" v-if="false">
            <div class="inputName">护照号码</div>
            <div class="inputVal">
              {{ signData.hz_number ? signData.hz_number : "未填写" }}
            </div>
          </div>
          <div class="formInput">
            <div class="inputName">身份证号</div>
            <div class="inputVal">{{ signData.id_card }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">出生日期</div>
            <div class="inputVal">{{ signData.date_birth }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">所属民族</div>
            <div class="inputVal">{{ signData.mz }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">所属国籍</div>
            <div class="inputVal">{{ signData.gj }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">健康状况</div>
            <div class="inputVal">{{ signData.stzk }}</div>
          </div>
          <div class="formInput">
            <div class="inputName">订单合计</div>
            <div class="inputVal">{{ signData.bill_money }}元</div>
          </div>
        </div>
      </div>
    </div>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="joinNumShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择报名人数</div>
        <div class="maskCheck">
          <div
            @click="joinNumFn(item)"
            :class="
              item.id == joinNumId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in joinNumArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="joinNumSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="startTimeShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择出发日期</div>
        <div class="maskCheck">
          <div
            @click="startTimeFn(item)"
            :class="
              item.id == startTimeId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in startTimeArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="startTimeSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="sexShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择学生性别</div>
        <div class="maskCheck">
          <div
            @click="sexFn(item)"
            :class="
              item.id == sexId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in sexArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="sexSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup v-model:show="linkMaskShow" round style="width: 80%;">
      <div class="carMask">
        <div class="textCont" v-if="schoolId == 1">
          <div class="maskName">2025寒假新加坡研学六日营委托协议书</div>
          <div class="tipItem">
            <div class="liTitle">
              甲方：<img style="height: 1.5rem" :src="cavasSignImg" />
            </div>
            <div class="liTitle">乙方：上海琢兴教育科技有限公司</div>
            <div class="liTitle">丙方：华人国际旅行社有限公司</div>
          </div>
          <div class="tipItem">
            根据国家有关法律规定，甲、乙、丙三方经友好协商，在平等、自愿的基础上，就甲方委托乙方、丙方为其甲方办理
            六日新加坡研学营
            交流项目（以下简称“活动”）事宜达成如下约定，特订立此协议，以资共同信守执行。
          </div>
          <div class="tipItem">
            <div class="liTitle">第一条 活动基本情况</div>
            <div class="liItem">
              1.甲方将于2025年 2月6日-2月11日参加研学活动；
            </div>
            <div class="liItem">
              2.乙方机构负责策划此次活动行程，安排学术参访内容，为甲方设计并执行此次活动，为甲方购买旅游意外保险，并在课程期间提供学术指导与培训，乙方提供的产品与服务应当符合保障甲方人身、财产安全的要求；
            </div>
            <div class="liItem">
              3.丙方作为经国家旅游局批准的具有正规出境旅游业务经营资质的旅游机构，受甲方及乙
              方委托组织甲方参加活动，负责为此次活动提供专业的餐饮、住宿及交通服务，丙方提供的产品与服务应当符合保障甲方人身、财产安全的要求。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第二条 活动行程</div>
            <div class="liItem">
              1.甲方参加此次活动的具体行程安排见签署的地接合同协议。
            </div>
            <div class="liItem">
              2.如遇航空公司延误或变更航班、天气状况恶劣、当地交通问题、临时法律法规等乙方、丙方已经尽到合理注意义务但仍不能避免的事件或不可抗力，为保证活动顺利进行及甲方子女的安全，以最大程度地保证活动内容的完整性为原则，乙方及丙方保留对行程进行适当调整的权利。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第三条 活动费用及服务标准</div>
            <div class="liItem">1.该费用包括：</div>
            <div class="liItem">
              1) 研学课程费：所有日程中所包含的课程费用、师资费用、耗材费用等；
            </div>
            <div class="liItem">
              2) 交通费：活动期间所有一切交通费；包括机票，往返高铁票；
            </div>
            <div class="liItem">
              3)
              住宿费：活动全程入住宾馆费用酒店的费用；入住宾馆酒店房型为双人标准间;
            </div>
            <div class="liItem">
              4) 餐饮费：活动期间的第一天的晚餐开始，至第七天的早餐结束；
            </div>
            <div class="liItem">
              5)
              参观费：参观游览各城市景点研学点（详见地接合同协议日程安排）费用、研学课程费用、活动全程导游导师讲解与服务费、
              司机与导游小费；
            </div>
            <div class="liItem">6) 大学参访费：安排大学参访相关费用；</div>
            <div class="liItem">
              7) 旅游意外保险费：该保险为适用于活动全程的境外旅游意外保险；
            </div>
            <div class="liItem">
              8） 其他费用：活动资料费（出行手册、学习资料等）、报名费；
            </div>
            <div class="liItem">2. 该费用不包括：</div>
            <div class="liItem">
              1)
              活动期间产生的甲方个人消费，如通讯费、行李超重费、个人购物、医疗费等费用；
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第四条 甲方权利与义务</div>
            <div class="liItem">
              1.
              甲方有权向乙方、丙方了解详细的活动安排、领队老师联系方式及活动安全预案；
            </div>
            <div class="liItem">
              2. 甲方有权要求乙方、丙方按照本协议活动行程内容兑现各项服务；
            </div>
            <div class="liItem">
              3. 甲方有权对活动内容向乙方、丙方提出合理的意见与建议；
            </div>
            <div class="liItem">
              4. 甲方有权在活动期间随时向乙方、丙方了解甲方的各项状况；
            </div>
            <div class="liItem">
              5.
              甲方须按照乙方、丙方规定的时间，及时提交与本次活动内容及签证办理相关的甲方个人信息，并须确保所提交的全部信息真实、齐全；
            </div>
            <div class="liItem">6. 因政策要求，甲方须确保随身携带身份证；</div>
            <div class="liItem">
              7. 甲方须按本协议约定按时、足额缴纳甲方参加活动的各项费用；
            </div>
            <div class="liItem">
              8.
              甲方在活动期间须遵守当地法律，尊重当地风俗，听从乙方、丙方安排，不得未经乙方、丙方允许擅自行动，否则由此引发的安全、经济与法律后果由甲方承担；
            </div>
            <div class="liItem">
              9.
              甲方在活动期间须妥善保管个人行李物品及重要证件，如在活动期间遗失财物、证
              件或遇盗、遇抢，乙方、丙方须积极维护甲方的合法权益，协助甲方妥善处理，因甲方原因对乙方、丙方造成的经济损失应由甲方进行补偿；
            </div>
            <div class="liItem">
              10.
              甲方必须全程随团，不得离团，亦不得从事与所持签证类型无关的活动，否则，因此产生的一切费用，包括但不限于境外移民局的遣送费和中国公安机关等的办案费，乙方和丙方的行政罚款，乙方和丙方为维权而产生的诉讼费、公证认证费用、律师费、差旅费等，由甲方承担；
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第五条 乙方权利与义务</div>
            <div class="liItem">
              1. 乙方有权制定活动期间的相关规定，并有权要求甲方认真遵守与执行；
            </div>
            <div class="liItem">
              2.
              乙方有权在甲方逾期不缴纳活动费用、且经电话及书面提醒后仍不缴费的情况下，取消甲方参加此次活动的名额，并扣除甲方已缴纳的全部费用；
            </div>
            <div class="liItem">
              3.
              乙方有权了解甲方与此次活动相关的全部个人信息，并须妥善保管甲方的各项信息，不得用于与本活动无关的任何用途；
            </div>
            <div class="liItem">
              4.
              乙方须为甲方办理所有研学过程中目的地或酒店的准入资格（包括校园、景区、基
              地等，同时包含酒店预订、保险购买等）。
            </div>
            <div class="liItem">
              5.
              乙方须在活动开始前对甲方进行相关行前指导，在活动前向甲方说明研学活动中的纪律与要求，规范甲方行为，并对甲方在活动期间的学习和生活给予指导和照顾；
            </div>
            <div class="liItem">
              6.
              乙方须在活动前以出行手册的形式向甲方说明当地法律法规、会议及学术参访中的纪律与要求，规范甲方行为，并对甲方在活动期间的学习和生活给予指导和照顾；
            </div>
            <div class="liItem">
              7. 乙方须按合同约定为甲方购买旅游意外保险；
            </div>
            <div class="liItem">
              8. 乙方不得组织、安排本协议约定以外的其他收费项目。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第六条 丙方权利与义务</div>
            <div class="liItem">
              1. 丙方有权制定活动期间的相关规定，并有权要求甲方认真遵守与执行；
            </div>
            <div class="liItem">
              2.
              丙方有权在不减少活动内容及参访景点、不降低活动服务标准的前提下，结合天气、交
              通及其他实际情况，对活动行程安排先后顺序进行适当调整；
            </div>
            <div class="liItem">
              3.
              丙方有权了解甲方与此次活动相关的个人信息，并须妥善保管甲方各项信息，不得用于与本活动无关的任何用途；
            </div>
            <div class="liItem">
              4.
              丙方须按本协议约定为甲方提供专业旅行服务，服务内容包括：安排甲方在营期内的餐饮及交通事宜；
            </div>
            <div class="liItem">
              5.
              丙方安排的宾馆须房间环境舒适干净、配套设施齐全、治安状况良好，房型为双人标准
              间，酒店级别要如报价表所示。
            </div>
            <div class="liItem">
              6.
              丙方须按本协议约定为甲方提供在活动期间的一日三餐，菜品应尽可能丰富、搭配合理，根据实际用餐人数情况安排环境与卫生状况良好的餐厅就餐；
            </div>
            <div class="liItem">
              7. 丙方不得组织、安排本协议约定以外的其他收费项目。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第七条 退出及退款办法</div>
            <div class="liItem">
              在甲方向乙方缴纳第一笔活动费用后，即视为确认参加本项目，乙方、丙方将正式开始为甲方提供供各类行前预定、研学期间酒店预订、研学期间车辆导游和相关研学点门票的预定，安排在营期期间餐饮、住宿、交通等事宜。
            </div>
            <div class="liItem">
              1.
              若甲方在缴纳全部活动费用后要求退出，甲方须同乙方协商，乙方在三十个自然日
              内按以下标准进行退费： 具体见地接合同退费条款。
            </div>
            <div class="liItem">
              2.
              如因甲方误时、误机或其他未提前书面通知乙方的原因未能如期参加活动，乙方及
              丙方不退还甲方活动费用；
            </div>
            <div class="liItem">
              3. 如因乙方原因导致活动无法成行，乙方应该正常退还甲方所有费用。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第八条 不可抗力</div>
            <div class="liItem">
              1.
              定义:“不可抗力”是指协议各方不能合理控制、不可预见或即使预见亦无法避免的事件，该事件妨碍、影响或延误任何一方根据协议履行其全部或部分义务，该事件包括但不限于政府行为、自然灾害、公共卫生医疗事件、战争或任何其它类似事件；
            </div>
            <div class="liItem">
              2.
              出现不可抗力事件时，知情方应及时、充分地向各方以书面形式进行通知，告知各方该类事件对本协议可能产生的影响，并应当在合理期限内提供相关证明，由于以上所述不可抗力事件致使协议的部分或全部不能履行或延迟履行，则各方于彼此间不承担任何违约责任，但甲、乙、丙三方均有义务在各自的职责范围内进行善后处理，由于不可抗力导致活动无法成行，乙、丙双方扣除活动已发生费用后退还甲方余下全部费用。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第九条 未尽事宜</div>
            <div class="liItem">
              本协议在执行前或执行期间，如有未尽事宜，甲、乙、丙三方协商同意后，另订附件附于本协议之内，所有附件在法律上均与本协议有同等效力。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第十条 协议份数</div>
            <div class="liItem">
              本协议一式三份，由甲、乙、丙三方各执一份，三份协议书具有同等效力。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第十一条 协议生效</div>
            <div class="liItem">本协议自三方完成签字盖章之日起生效。</div>
          </div>
          <div class="tipItem">
            <div class="liTitle">行程表：</div>
            <div class="liItem">
              <img src="static/img/xjp_ht1.png" />
            </div>
            <div class="liItem">
              <img src="static/img/xjp_ht2.png" />
            </div>
          </div>
          <div class="linkFoot">
            <div class="linkItem">
              <div class="linkFlex">
                <div>
                  <div>甲方：</div>
                  <div>(签字)</div>
                </div>
                <img
                  class="cavasSignImg"
                  v-if="cavasSignImg"
                  :src="cavasSignImg"
                />
              </div>
              <div>日期：{{ getTime() }}</div>
            </div>
            <div class="linkItem">
              <div class="hasZin">乙方：上海琢兴教育科技有限公司</div>
              <div>(盖章)</div>
              <div>日期：2024-12-18</div>
              <img class="linkImg" src="static/img/linkImg2.png" />
            </div>
            <div class="linkItem">
              <div class="hasZin">丙方：华人国际旅行社有限公司</div>
              <div>(盖章)</div>
              <div>日期：2024-12-18</div>
              <!-- <img class="linkImg" src="static/img/linkImg2.png" /> -->
            </div>
          </div>
        </div>
        <div class="textCont" v-if="schoolId == 2">
          <div class="maskName">2025 寒假上海研学五日营 委托协议书</div>
          <div class="tipItem">
            <div class="liTitle">
              甲方：<img style="height: 1.5rem" :src="cavasSignImg" />
            </div>
            <div class="liTitle">乙方：上海琢兴教育科技有限公司</div>
            <div class="liTitle">丙方：上海金帆国际旅行社有限公司</div>
          </div>
          <div class="tipItem">
            根据国家有关法律规定,甲、乙、丙三方经友好协商,在平等、自愿的基础上,就甲方委托乙方、丙方为其甲方办理五日上海研学营交流项目(以下简称“活动”)事宜达成如下约定，特订立此协议，以资共同信守执行。
          </div>
          <div class="tipItem">
            <div class="liTitle">第一条 活动基本情况</div>
            <div class="liItem">
              1. 甲方将于 2025 年 2 月 7 日-2 月 11 日参加研学活动；
            </div>
            <div class="liItem">
              2.
              乙方机构负责策划此次活动行程，安排学术参访内容，为甲方设计并执行此次活动，为
              甲方购买旅游意外保险，并在课程期间提供学术指导与培训，乙方提供的产品与服务应
              当符合保障甲方人身、财产安全的要求；
            </div>
            <div class="liItem">
              3.
              丙方作为经国家旅游局批准的具有正规出境旅游业务经营资质的旅游机构，受甲方及乙
              方委托组织甲方参加活动，负责为此次活动提供专业的餐饮、住宿及交通服务，丙方提
              供的产品与服务应当符合保障甲方人身、财产安全的要求。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第二条 活动行程</div>
            <div class="liItem">
              1. 甲方参加此次活动的具体行程安排见签署的地接合同协议。
            </div>
            <div class="liItem">
              2.
              如遇航空公司延误或变更航班、天气状况恶劣、当地交通问题、临时法律法规等乙方、
              丙方已经尽到合理注意义务但仍不能避免的事件或不可抗力，为保证活动顺利进行及甲
              方子女的安全，以最大程度地保证活动内容的完整性为原则，乙方及丙方保留对行程进
              行适当调整的权利。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第三条 活动费用及服务标准</div>
            <div class="liItem">1. 该费用包括：</div>
            <div class="liItem">
              1) 研学课程费：所有日程中所包含的课程费用、师资费用、耗材费用等；
            </div>
            <div class="liItem">
              2) 交通费：活动期间所有一切交通费；往返高铁票；
            </div>
            <div class="liItem">
              3)
              住宿费：活动全程入住宾馆费用酒店的费用；入住宾馆酒店房型为双人标准间；
            </div>
            <div class="liItem">
              4) 餐饮费：活动期间的第一天的晚餐开始，至第五天的早餐结束；
            </div>
            <div class="liItem">
              5)
              参观费：参观游览各城市景点研学点（详见地接合同协议日程安排）费用、研学课程费
              用、活动全程导游导师讲解与服务费、 司机与导游小费；
            </div>
            <div class="liItem">6) 大学参访费：安排大学参访相关费用；</div>
            <div class="liItem">
              7) 旅游意外保险费：该保险为适用于活动全程的旅游意外保险；
            </div>
            <div class="liItem">
              8） 其他费用：活动资料费（出行手册、学习资料等）、报名费；
            </div>
            <div class="liItem">2. 该费用不包括：</div>
            <div class="liItem">
              1)
              活动期间产生的甲方个人消费，如通讯费、行李超重费、个人购物、医疗费等费用;
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第四条 甲方权利与义务</div>
            <div class="liItem">
              1.
              甲方有权向乙方、丙方了解详细的活动安排、领队老师联系方式及活动安全预案;
            </div>
            <div class="liItem">
              2. 甲方有权要求乙方、丙方按照本协议活动行程内容兑现各项服务；
            </div>
            <div class="liItem">
              3. 甲方有权对活动内容向乙方、丙方提出合理的意见与建议；
            </div>
            <div class="liItem">
              4. 甲方有权在活动期间随时向乙方、丙方了解甲方的各项状况；
            </div>
            <div class="liItem">
              5.
              甲方须按照乙方、丙方规定的时间，及时提交与本次活动内容及签证办理相关的甲方个
              人信息，并须确保所提交的全部信息真实、齐全；
            </div>
            <div class="liItem">6. 因政策要求，甲方须确保随身携带身份证；</div>
            <div class="liItem">
              7. 甲方须按本协议约定按时、足额缴纳甲方参加活动的各项费用；
            </div>
            <div class="liItem">
              8.
              甲方在活动期间须遵守当地法律，尊重当地风俗，听从乙方、丙方安排，不得未经乙方、
              丙方允许擅自行动，否则由此引发的安全、经济与法律后果由甲方承担；
            </div>
            <div class="liItem">
              9.
              甲方在活动期间须妥善保管个人行李物品及重要证件，如在活动期间遗失财物、证
              件
              或遇盗、遇抢，乙方、丙方须积极维护甲方的合法权益，协助甲方妥善处理，因甲方原
              因对乙方、丙方造成的经济损失应由甲方进行补偿；
            </div>
            <div class="liItem">
              10.
              甲方必须全程随团，不得离团，亦不得从事与所持签证类型无关的活动，否则，因此产
              生的一切费用，包括但不限于境外移民局的遣送费和中国公安机关等的办案费，乙方和
              丙方的行政罚款，乙方和丙方为维权而产生的诉讼费、公证认证费用、律师费、差旅费
              等，由甲方承担；
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第五条 乙方权利与义务</div>
            <div class="liItem">
              1. 乙方有权制定活动期间的相关规定，并有权要求甲方认真遵守与执行；
            </div>
            <div class="liItem">
              2.
              乙方有权在甲方逾期不缴纳活动费用、且经电话及书面提醒后仍不缴费的情况下，取消
              甲方参加此次活动的名额，并扣除甲方已缴纳的全部费用；
            </div>
            <div class="liItem">
              3.
              乙方有权了解甲方与此次活动相关的全部个人信息，并须妥善保管甲方的各项信息，不
              得用于与本活动无关的任何用途；
            </div>
            <div class="liItem">
              4.
              乙方须为甲方办理所有研学过程中目的地或酒店的准入资格（包括校园、景区、基
              地等，同时包含酒店预订、保险购买等）。
            </div>
            <div class="liItem">
              5.
              乙方须在活动开始前对甲方进行相关行前指导，在活动前向甲方说明研学活动中的纪
              律与要求，规范甲方行为，并对甲方在活动期间的学习和生活给予指导和照顾；
            </div>
            <div class="liItem">
              6.
              乙方须在活动前以出行手册的形式向甲方说明当地法律法规、会议及学术参访中的纪律
              与要求，规范甲方行为，并对甲方在活动期间的学习和生活给予指导和照顾；
            </div>
            <div class="liItem">
              7. 乙方须按合同约定为甲方购买旅游意外保险；
            </div>
            <div class="liItem">
              8. 乙方不得组织、安排本协议约定以外的其他收费项目。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第六条 丙方权利与义务</div>
            <div class="liItem">
              1. 丙方有权制定活动期间的相关规定，并有权要求甲方认真遵守与执行；
            </div>
            <div class="liItem">
              2 第六条 丙方权利与义务 .
              丙方有权在不减少活动内容及参访景点、不降低活动服务标准的前提下，结合天气、交
              通及其他实际情况，对活动行程安排先后顺序进行适当调整；
            </div>
            <div class="liItem">
              3.
              丙方有权了解甲方与此次活动相关的个人信息，并须妥善保管甲方各项信息，不得用于
              与本活动无关的任何用途；
            </div>
            <div class="liItem">
              4.
              丙方须按本协议约定为甲方提供专业旅行服务，服务内容包括：安排甲方在营期内的
              餐饮及交通事宜；
            </div>
            <div class="liItem">
              5.
              丙方安排的宾馆须房间环境舒适干净、配套设施齐全、治安状况良好，房型为双人标
              准 间，酒店级别要如报价表所示。
            </div>
            <div class="liItem">
              6.
              丙方须按本协议约定为甲方提供在活动期间的一日三餐，菜品应尽可能丰富、搭配合
              理，根据实际用餐人数情况安排环境与卫生状况良好的餐厅就餐；
            </div>
            <div class="liItem">
              7. 丙方不得组织、安排本协议约定以外的其他收费项目
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第七条 退出及退款办法</div>
            <div class="liItem">
              在甲方向乙方缴纳第一笔活动费用后，即视为确认参加本项目，乙方、丙方将正式开始
              为甲方提供供各类行前预定、研学期间酒店预订、研学期间车辆导游和相关研学点门票的预
              定，安排在营期期间餐饮、住宿、交通等事宜。
            </div>
            <div class="liItem">
              1.
              若甲方在缴纳全部活动费用后要求退出，甲方须同乙方协商，乙方在三十个自然日
              内按以下标准进行退费： 具体见地接合同退费条款。
            </div>
            <div class="liItem">
              2.
              如因甲方误时、误机或其他未提前书面通知乙方的原因未能如期参加活动，乙方及
              丙方不退还甲方活动费用；
            </div>
            <div class="liItem">
              3. 如因乙方原因导致活动无法成行，乙方应该正常退还甲方所有费用。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第八条 不可抗力</div>
            <div class="liItem">
              1.
              定义:“不可抗力”是指协议各方不能合理控制、不可预见或即使预见亦无法避免的事
              件，该事件妨碍、影响或延误任何一方根据协议履行其全部或部分义务，该事件包括但
              4 / 5
              不限于政府行为、自然灾害、公共卫生医疗事件、战争或任何其它类似事件；
            </div>
            <div class="liItem">
              2.
              出现不可抗力事件时，知情方应及时、充分地向各方以书面形式进行通知，告知各方该
              类事件对本协议可能产生的影响，并应当在合理期限内提供相关证明，由于以上所述不
              可抗力事件致使协议的部分或全部不能履行或延迟履行，则各方于彼此间不承担任何违
              约责任，但甲、乙、丙三方均有义务在各自的职责范围内进行善后处理，由于不可抗力
              导致活动无法成行，乙、丙双方扣除活动已发生费用后退还甲方余下全部费用。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第九条 未尽事宜</div>
            <div class="liItem">
              本协议在执行前或执行期间，如有未尽事宜，甲、乙、丙三方协商同意后，另订附件附
              于本协议之内，所有附件在法律上均与本协议有同等效力。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第十条 协议份数</div>
            <div class="liItem">
              本协议一式三份，由甲、乙、丙三方各执一份，三份协议书具有同等效力。
            </div>
          </div>
          <div class="tipItem">
            <div class="liTitle">第十一条 协议生效</div>
            <div class="liItem">本协议自三方完成签字盖章之日起生效。</div>
          </div>
          <div class="tipItem">
            <div class="liTitle">行程表：</div>
            <div class="liItem">
              <img src="static/img/shjd_ht1.png" />
            </div>
            <div class="liItem">
              <img src="static/img/shjd_ht2.png" />
            </div>
          </div>
          <div class="linkFoot">
            <div class="linkItem">
              <div class="linkFlex">
                <div>
                  <div>甲方：</div>
                  <div>(签字)</div>
                </div>
                <img
                  class="cavasSignImg"
                  v-if="cavasSignImg"
                  :src="cavasSignImg"
                />
              </div>
              <div>日期：{{ getTime() }}</div>
            </div>
            <div class="linkItem hasTop">
              <div class="hasZin">乙方：上海琢兴教育科技有限公司</div>
              <div>(盖章)</div>
              <div>日期：2024-12-18</div>
              <img class="linkImg" src="static/img/linkImg2.png" />
            </div>
            <div class="linkItem hasTop">
              <div class="hasZin">丙方：</div>
              <div class="hasZin">(盖章)</div>
              <div class="hasZin">日期：2024-12-18</div>
              <!-- <img class="linkImg linkImgLeft" src="static/img/linkImg2.png" /> -->
            </div>
          </div>
        </div>
        <div class="linkCtrl">
          <div class="maskSure" @click="linkSure">
            {{ cavasSignImg ? "确认签订合同" : "关闭弹窗" }}
          </div>
          <div class="maskSure" @click="showCavasFn">
            {{ cavasSignImg == "" ? "点击合同签名" : "更改签名" }}
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="showDate"
      round
      position="bottom"
    >
      <div class="maskCont">
        <datetime-view
          start-date="1970-01-01"
          v-model="minuteListValue"
          ref="datetime"
          format="YYYY-MM-DD"
        ></datetime-view>
        <div class="maskBtn" @click="dateSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="showCavas"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="signCont">
          <canvas
            ref="canvas"
            style="border: 1px dashed #999;"
            :width="canvasWidth"
            :height="canvasHeight"
            @mousedown="startDrawing"
            @mousemove="draw"
            @mouseup="stopDrawing"
            @touchstart="startDrawingTouch"
            @touchmove="drawTouch"
            @touchend="stopDrawing"
          >
          </canvas>
        </div>
        <div class="cavasTip">请在上方空白区进行签名</div>
        <div class="cavasCtrl">
          <div class="maskBtn" @click="clearCanvas">清空</div>
          <div class="maskBtn" @click="saveSignature">确认签名</div>
        </div>
      </div>
    </van-popup>

    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <sub-load v-if="showLoad"></sub-load>
    <toast
      v-model="showToast"
      width="50%"
      position="middle"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
  </div>
</template>
<script>
import { createSignUp, getStatus, getSignUp } from "@/http/api";
import { Toast, DatetimeView } from "vux";
import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import subLoad from "@/components/public/subLoad.vue";
import WeixinJSBridge from "weixin-js-sdk";
import SignaturePad from "signature_pad";

export default {
  components: { Toast, getLoad, getTimeOut, subLoad, DatetimeView },
  name: "",
  data() {
    return {
      nowTime: "",
      canvasWidth: 375,
      canvasHeight: 200,
      showTimeOut: false,
      showCont: false,
      showText: "",
      showToast: false,
      showLoad: false,
      isSign: false,
      signData: {},
      isOpenOne: true,
      isOpenTwo: false,
      isOpenThree: false,
      minuteListValue: "2000-01-01",
      signInfo: {
        realname: "",
        class_name: "",
        sign_up_num: "",
        cf_time: this.$route.query.id == 1 ? "2月6日" : "2月7日",
        mobile: "",
        sex: "",
        hz_number: "",
        id_card: "",
        date_birth: "",
        mz: "",
        gj: "",
        stzk: ""
      },
      checked: "1",
      signNumVal: "",
      joinNumShow: false,
      startTimeShow: false,
      linkMaskShow: false,
      showDate: false,
      sexShow: false,
      showCavas: false,
      joinNumArr: [
        { name: "1学生0陪同", id: 0, val: "1,0" },
        { name: "1学生1陪同", id: 1, val: "1,1" },
        { name: "1学生2陪同", id: 2, val: "1,2" },
        { name: "1学生3陪同", id: 3, val: "1,3" }
      ],
      sexArr: [{ name: "男生", id: 0 }, { name: "女生", id: 1 }],
      startTimeArr: [{ name: "7月批", id: 0 }, { name: "8月批", id: 1 }],
      sexId: 0,
      startTimeId: 0,
      joinNumId: 0,
      isCheck: true,
      schoolId: this.$route.query.id || 1,
      bankNum: "1001 7011 0930 0513 509",
      cavasSignImg: "",
      drawing: false,
      lastX: 0,
      lastY: 0
    };
  },
  props: {},
  setup() {},
  methods: {
    getAllMoney() {
      let personNum = parseInt(
        this.signData.sign_up_parents_num + this.signData.sign_up_student_num
      );
      let oneMoney = this.signData.bm_type == 1 ? 15800 : 5800;
      console.log(personNum);
      return (personNum * oneMoney).toFixed(2);
    },
    getTime() {
      let time = new Date();
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    showCavasFn() {
      this.showCavas = true;
      // setTimeout(() => {
      //     this.initSign()
      // }, 100);
    },

    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.lastX = offsetX;
      this.lastY = offsetY;
    },
    draw(event) {
      if (!this.isDrawing) return;
      const ctx = this.$refs.canvas.getContext("2d");
      const { offsetX, offsetY } = event;
      ctx.beginPath();
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(offsetX, offsetY);
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      ctx.stroke();
      this.lastX = offsetX;
      this.lastY = offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    startDrawingTouch(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const { offsetX, offsetY } = this.getTouchOffset(touch);
      this.startDrawing({ offsetX, offsetY });
    },
    drawTouch(event) {
      event.preventDefault();
      const touch = event.touches[0];
      const { offsetX, offsetY } = this.getTouchOffset(touch);
      this.draw({ offsetX, offsetY });
    },
    getTouchOffset(touch) {
      const rect = this.$refs.canvas.getBoundingClientRect();
      const offsetX = touch.clientX - rect.left;
      const offsetY = touch.clientY - rect.top;
      return { offsetX, offsetY };
    },
    clearCanvas() {
      const ctx = this.$refs.canvas.getContext("2d");
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    },
    saveSignature() {
      const canvas = this.$refs.canvas;
      const dataURL = canvas.toDataURL(); // 将 Canvas 转换为图片的 Base64 格式
      this.upload(dataURL);
    },
    isSignatureEmpty() {
      const ctx = this.$refs.canvas.getContext("2d");
      const imageData = ctx.getImageData(
        0,
        0,
        this.canvasWidth,
        this.canvasHeight
      ).data;
      for (let i = 0; i < imageData.length; i += 4) {
        // 如果发现有像素点，则说明签名不为空
        if (imageData[i + 3] !== 0) {
          return false;
        }
      }
      return true;
    },
    dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async upload(signImg) {
      if (this.isSignatureEmpty()) {
        this.showToast = true;
        this.showText = "签名不能为空";
        return false;
      }
      // return false
      const blob = await this.dataURLtoFile(signImg, "signature.png");
      const formData = new FormData();
      formData.append("file", blob, "signature.png");
      $.ajax({
        url: this.apis + "/common/Upload/UpImg",
        dataType: "json",
        type: "post",
        processData: false,
        contentType: false,
        data: formData,
        success: res => {
          if (res.code == 1) {
            let data = res.data;
            this.cavasSignImg = data;
            this.showCavas = false;
          } else {
            this.showToast = true;
            this.showText = res.msg;
          }
        },
        error: res => {
          this.upMoreImgLoad = false;
          this.showToast = true;
          this.showText = "网络超时";
        }
      });
    },
    linkShowFn() {
      this.linkMaskShow = true;
    },

    copyFn() {
      let oInput = document.createElement("input");
      oInput.value = this.bankNum;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.showToast = true;
      this.showText = "复制成功";
      oInput.remove();
    },
    getMoney() {
      if (this.signNumVal != "") {
        let childNum = Number(this.signNumVal.split(",")[0]);
        let parentNum = Number(this.signNumVal.split(",")[1]);
        let money = 14800 * childNum + 12800 * parentNum;
        return money;
      }
    },
    linkSure() {
      // this.downLoadPdf()
      this.isCheck = true;
      this.linkMaskShow = false;
    },
    checkFn() {
      this.isCheck = !this.isCheck;
    },
    joinNumSureFn() {
      if (this.signInfo.sign_up_num == "") {
        this.signInfo.sign_up_num = this.joinNumArr[0].name;
        this.signNumVal = this.joinNumArr[0].val;
      }
      this.joinNumShow = false;
    },
    dateSureFn() {
      this.signInfo.date_birth = this.minuteListValue;
      this.showDate = false;
    },
    checkCar(val) {
      let reg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
      if (reg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    sexSureFn() {
      if (this.signInfo.sex == "") {
        this.signInfo.sex = this.sexArr[0].name;
      }
      this.sexShow = false;
    },
    startTimeSureFn() {
      if (this.signInfo.cf_time == "") {
        this.signInfo.cf_time = this.startTimeArr[0].name;
      }
      this.startTimeShow = false;
    },

    startTimeFn(item) {
      this.signInfo.cf_time = item.name;
      this.startTimeId = item.id;
    },
    sexFn(item) {
      this.signInfo.sex = item.name;
      this.sexId = item.id;
    },
    joinNumFn(item) {
      this.signNumVal = item.val;
      this.signInfo.sign_up_num = item.name;
      this.joinNumId = item.id;
    },
    checkPhone(num) {
      //手机号正则验证
      let reg = /^1[3456789]{1}\d{9}$/;
      if (reg.test(num)) {
        return true;
      } else {
        return false;
      }
    },
    wxPayFn(res) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: res.data.data.appId, //公众号ID，由商户传入
          timeStamp: res.data.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: res.data.data.nonceStr, //随机串
          package: res.data.data.package,
          signType: res.data.data.signType, //微信签名方式：
          paySign: res.data.data.paySign //微信签名
        },
        resData => {
          if (resData.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            this.showToast = true;
            this.showText = "支付成功";
            this.getData();
          } else {
            this.showToast = true;
            this.showText = "支付失败";
          }
        }
      );
    },
    saveFn() {
      if (this.signInfo.realname.length < 2) {
        this.showToast = true;
        this.showText = "请输入报名姓名";
        return false;
      } else if (this.signInfo.sex == "") {
        this.showToast = true;
        this.showText = "请选择学生性别";
        return false;
      } else if (this.signInfo.class_name == "") {
        this.showToast = true;
        this.showText = "请输入年级班级";
        return false;
      } else if (this.signInfo.sign_up_num == "") {
        this.showToast = true;
        this.showText = "请选择报名人数";
        return false;
      } else if (this.signInfo.cf_time == "") {
        this.showToast = true;
        this.showText = "请选择出发日期";
        return false;
      } else if (!this.checkPhone(this.signInfo.mobile)) {
        this.showToast = true;
        this.showText = "请输入正确的手机号";
        return false;
      } else if (!this.checkCar(this.signInfo.id_card)) {
        this.isOpenTwo = true;
        this.showToast = true;
        this.showText = "请输入正确的身份证号";
        return false;
      } else if (this.signInfo.date_birth == "") {
        this.showToast = true;
        this.showText = "请选择出生日期";
        return false;
      } else if (this.signInfo.mz == "") {
        this.showToast = true;
        this.showText = "请输入所属民族";
        return false;
      } else if (this.signInfo.gj == "") {
        this.showToast = true;
        this.showText = "请输入所属国籍";
        return false;
      } else if (this.checked == 2 && this.signInfo.stzk == "") {
        this.showToast = true;
        this.showText = "请输入身体状况备注";
        return false;
      } else if (this.cavasSignImg == "") {
        this.showToast = true;
        this.showText = "请签订报名服务合同";
        return false;
      }

      if (!this.showLoad) {
        this.showLoad = true;
        let data = {
          realname: this.signInfo.realname,
          class_name: this.signInfo.class_name,
          sign_up_num: this.signNumVal,
          sex: this.signInfo.sex == "男生" ? "1" : "2",
          cf_time: this.signInfo.cf_time,
          mobile: this.signInfo.mobile,
          hz_number: this.signInfo.hz_number,
          id_card: this.signInfo.id_card,
          date_birth: this.signInfo.date_birth,
          mz: this.signInfo.mz,
          bm_type: this.schoolId,
          autograph: this.cavasSignImg,
          gj: this.signInfo.gj,
          stzk: this.checked == 1 ? "健康" : this.signInfo.stzk
        };
        createSignUp(data)
          .then(res => {
            if (res.data.code == 1) {
              this.showToast = true;
              this.showText = "报名成功";
              this.getData();
              // this.wxPayFn(res)
            } else {
              this.showToast = true;
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(() => {
            this.showLoad = false;
            this.showTimeOut = true;
            this.showCont = true;
          });
      }
    },
    getSignUpFn() {
      let data = {};
      getSignUp(data)
        .then(res => {
          if (res.data.code == 1) {
            this.signData = res.data.data;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showLoad = false;
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    getData() {
      let data = {};
      getStatus(data)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data == 2) {
              this.isSign = false;
              this.showCont = true;
            } else if (res.data.data == 1) {
              this.isSign = true;
              this.getSignUpFn();
            }
          } else {
            this.showCont = true;
            this.showToast = true;
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showLoad = false;
          this.showTimeOut = true;
          this.showCont = true;
        });
    }
  },
  mounted() {},
  created() {
    this.getData();
  }
};
</script>
<style scoped lang="less">
.authContainer {
  background-color: #e7f2ff;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
  .bannerCont {
    width: 100%;
    // height: 20rem;
    background-image: linear-gradient(to bottom, #5c84e9, #e7f2ff);
    color: #fff;
    display: flex;
    justify-content: space-between;
    //   padding: 1rem 4% 1rem;
    box-sizing: border-box;
    .bannerImg {
      flex: 1;
      width: 1rem;
      position: relative;
      //   top: -1rem;
    }
    .bannerLeft {
      width: 7rem;
      //   font-family: cursive;
      .bannerName {
        font-size: 1.5rem;
        font-weight: bold;
      }
      .bannerLeftImg {
        width: 7rem;
      }
    }
  }
  .navTip {
    // color: #5c84e9;
    text-align: center;
    margin-top: 0.75rem;
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    position: relative;
    //   top: -4rem;
    padding: 1rem 4%;
    margin-top: -1rem;
    border-radius: 0.75rem;
    box-sizing: border-box;
    .signImg {
      position: absolute;
      width: 4rem;
      top: 0.5rem;
      right: 0.5rem;
      transform: rotate(40deg);
    }
    .formTitle {
      font-size: 0.9rem;
      font-weight: bold;
      margin-bottom: 1rem;
      text-align: center;
      //   font-family: cursive;
      .iconfont {
        color: #5c84e9;
        font-size: 1rem;
        margin-right: 0.25rem;
        position: relative;
        top: 0.05rem;
      }
    }
    .formStep {
      font-size: 0.75rem;
      font-weight: bold;
      display: flex;
      padding: 0.75rem 0;
      justify-content: space-between;
      align-items: center;
      .ctrlBtn {
        font-weight: normal;
        font-size: 0.65rem;
        text-decoration: underline;
      }
    }
    .stepItem {
      .formInput {
        display: flex;
        padding: 0.75rem 1rem;
        box-sizing: border-box;
        align-items: center;
        width: 100%;
        background-color: #f6f7f9;
        margin-bottom: 1rem;
        border-radius: 1.5rem;
        .inputName {
          width: 4rem;
        }
        .formFlexCont {
          display: flex;
          align-items: center;
          .formRadio {
            margin-right: 0.75rem;
          }
        }
        .icon-xiala {
          width: 1.5rem;
          font-size: 0.7rem;
          color: #ccc;
          text-align: center;
        }
        .inputOut {
          flex: 1;
          width: 3rem;
          position: relative;
          .inputMask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
          input {
            width: 90%;
            border: none;
            background: none;
            outline: none;
          }
        }
        input {
          flex: 1;
          // width: 90%;
          border: none;
          background: none;
          outline: none;
        }
      }
    }
    .linkCont {
      display: flex;
      padding: 0.5rem 0;
      box-sizing: border-box;
      font-size: 0.6rem;
      align-items: center;
      color: #666;
      .linkRadio {
        height: 0.7rem;
        width: 0.7rem;
        border-radius: 0.1rem;
        border: 1px solid #5c84e9;
        margin-right: 0.5rem;
        color: #fff;
      }
      .linkActive {
        background-color: #5c84e9;
      }
      .linkText {
        color: #5c84e9;
        text-decoration: underline;
      }
    }
    .formTip {
      margin-bottom: 0.75rem;
      color: #666;
      font-size: 0.6rem;
      // text-align: center;
      .moneyText {
        font-size: 1.1rem;
      }
    }
    .textCenter {
      text-align: center;
    }
    .saveBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      background-image: linear-gradient(to right, #c9dffb, #5c84e9);
      color: #fff;
      font-size: 0.8rem;
      border-radius: 2rem;
      //   font-family: cursive;
    }
  }
  .noBg {
    .stepItem {
      .formInput {
        background-color: #fff;
        padding: 0.25rem 1rem;
        color: #666;
      }
    }
  }
  .tipCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    padding: 1rem 4%;
    border-radius: 0.75rem;
    box-sizing: border-box;
    margin-top: 1rem;
    .tipHead {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #5c84e9;
    }
    .tipItem {
      margin-bottom: 0.5rem;
      .redText {
        color: #5c84e9;
      }
    }
  }
  .maskCont {
    padding: 1.5rem 4%;
    box-sizing: border-box;
    .signCont {
      // border: 1px dashed #999;
      // height: 13rem;
      display: flex;
      justify-content: center;
    }
    .cavasTip {
      font-size: 0.6rem;
      margin-top: 0.5rem;
      text-align: center;
      color: #666;
    }
    .cavasCtrl {
      display: flex;
      justify-content: space-between;
      .maskBtn {
        width: 48%;
        border-radius: 0.25rem;
        // margin-left: 0.75rem;
      }
    }
    .maskHead {
      width: 100%;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }
    .maskActiveVal {
      margin: 0.25rem 0 2rem;
      font-size: 1rem;
      text-align: center;
      color: #5c84e9;
    }
    .maskCheck {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .maskCheckItem {
        width: 46%;
        text-align: center;
        background-color: #f6f7f9;
        padding: 0.75rem 0;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
      }
      .maskCheckItemActive {
        background-color: #5c84e9;
        color: #fff;
      }
    }
    .sildNum {
      margin: 0.25rem 0 2rem;
      font-size: 1.2rem;
      text-align: center;
      span {
        color: #5c84e9;
      }
    }
    .maskSild {
      width: 90%;
      margin: 0 auto;
      margin-bottom: 3rem;
    }
    .maskWork {
      width: 100%;
      .workInput {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        display: flex;
        border-radius: 2rem;
        overflow: hidden;
        align-items: center;
        background-color: #f6f7f9;
        input {
          flex: 1;
          margin-right: 0.75rem;
          border: none;
          outline: none;
          background: none;
        }
        .clearInput {
          color: #5c84e9;
        }
      }
      .maskWrokTip {
        width: 100%;
        font-size: 0.9rem;
        margin: 0.75rem 0;
      }
      .maskWorkDes {
        font-size: 0.6rem;
        color: #5c84e9;
        margin-top: 0.75rem;
        text-indent: 0.75rem;
      }
      .workHot {
        display: flex;
        flex-wrap: wrap;
        .hotItem {
          padding: 0.5rem 1rem;
          background-color: #f6f7f9;
          border-radius: 0.25rem;
          margin-bottom: 0.75rem;
          margin-right: 0.5rem;
        }
        .hotItemActive {
          background-color: #5c84e9;
          color: #fff;
        }
      }
    }
    .maskFlexBtn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .maskBtn {
        width: 46%;
      }
      .maskBtnDef {
        background: #fff;
        color: #5c84e9;
        border: 1px solid #5c84e9;
        box-sizing: border-box;
      }
    }
    .maskBtn {
      width: 100%;
      text-align: center;
      padding: 0.75rem 0;
      background-color: #5c84e9;
      border: 1px solid #5c84e9;
      color: #fff;
      border-radius: 2rem;
      margin-top: 1.5rem;
    }
    .disMaskBtn {
      opacity: 0.5;
    }
  }
  .carMask {
    width: 100%;
    height: 30rem;
    background-color: #fff;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    .textCont {
      height: 10rem;
      flex: 1;
      overflow-y: auto;
      padding-bottom: 0.5rem;
      font-size: 0.7rem;
      .maskName {
        font-size: 0.8rem;
        font-weight: bold;
        text-align: center;
        color: #333;
        padding: 1rem 0;
      }
      .linkHead {
        font-size: 0.6rem;
        text-indent: 1.25rem;
      }
      .tipItem {
        margin-bottom: 1rem;
        .liTitle {
          font-weight: bold;
          margin-bottom: 0.5rem;
        }
        .liItem {
          // padding-left: 1.5rem;
          box-sizing: border-box;
          margin-bottom: 0.5rem;
          img {
            width: 100%;
          }
        }
      }
      .linkFoot {
        position: relative;
        margin-top: 1rem;
        .linkItem {
          margin-bottom: 0.5rem;
          position: relative;
          z-index: 10;
          .linkImg {
            position: absolute;
            bottom: 0rem;
            right: 2rem;
            width: 4rem;
          }
          .linkImgLeft {
            left: 3rem;
          }
          .hasZin {
            position: relative;
            z-index: 10;
          }
        }
        .hasTop {
          margin-top: 2rem;
        }
        .linkFlex {
          display: flex;
          align-items: center;
          img {
            height: 3rem;
          }
        }
      }
    }
    .linkCtrl {
      display: flex;
      justify-content: space-between;
      .maskSure {
        width: 48%;
        color: white;
        text-align: center;
        font-size: 0.6rem;
        margin: 1rem auto 0;
        border-radius: 1.1rem;
        background-color: #5c84e9;
        line-height: 2.2rem;
      }
    }
  }
}
</style>
<style>
.textareaCont .van-cell {
  background-color: #f6f7f9 !important;
  font-size: 0.7rem;
}
</style>
